<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'connectionWechat.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta name="viewport" content="width=device-width"/>
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<link href="./css/vendor/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
<link href="./css/flat-ui.min.css" rel="stylesheet">
<link href="./css/style.min.css" rel="stylesheet">
<script src="./js/sms.js"></script>
<style type="text/css">
	body{
		background-color: #FFF;
	}
	.top{
	height:125px;
	background-color: #ffffff
	}
	.wechat{
		border-top: 1px solid #CCC;
		height: 26px;
		padding: 5px;
	}
	.wechat img{
		height: 16px;
		width: 16px;
	}
	#login{
		margin-top: 50px;
		padding: 20px;
	}
</style>
</head>
<body>
<div class="container top">
<div><span style="font-size: 35px;color:#ff3e3e">大奖等你<br>快来参与</span></div>

</div>
<div style="background:#ededed;padding-bottom: 20px;">
<div class="container">
	<div class="row">
	<div class="col-md-8">
		<img src="./images/timg.jpg" class="imgMove img-responsive"/>
	</div>
	<div class="col-md-4">
	<div id="login" style="background-color: #ffffff">
			<div>
				<ul class="nav nav-tabs" role="tablist">
					<li role="presentation" class="active"><a href="#tab1"
						aria-controls="tab1" role="tab" data-toggle="tab">手机动态密码登录</a></li>
					<li role="presentation"><a href="#tab2" aria-controls="tab2"
						role="tab" data-toggle="tab">账号密码登录</a></li>
				</ul>
				<Br>
				<div class="tab-content">
					<div role="tabpanel" class="tab-pane active" id="tab1">
						<div class="loginForm">
							<form id="phone_login" action="servlet/login" method="post" onsubmit="return checkPhoneLogin()">
								<div class="form-group">
									<input id="phone" name="phone" type="text" class="form-control"
										placeholder="仅支持中国大陆手机号"><br>
										 <div class="input-group">
											<input name="SmsCheckCode" id="SmsCheckCode" type="text" class="form-control"
											placeholder="输入手机动态密码" onBlur="CodeCheck()">
											<span class="input-group-btn"> 
											<input type="button" class="sbtn sbtn-black" id="btnSendCode"  onclick="sendMessagee()" value="获取验证码">											
											 </span> 
										 </div> 
										<!-- <div class="input-group">
							              <input type="text" class="form-control">
							              <span class="input-group-btn">
							                <button class="btn btn-default" type="button">Go!</button>
							              </span>
							            </div> -->
										</span><br>										
										<!-- 隐藏输入框，区别登录方式 -->
										<input type="hidden"  value="login_dynamic" name="flag">
										
									<br>
									<span id="jbPhoneTip"></span><br>  
									<!-- 显示验证码校验是否成功 -->
									<span id="SmsCheckCodeTip"></span>
									<div style="text-align: center;">
										<button class="sbtn sbtn-red"
											style="width: 100%;margin-top: 20px;">登录</button>
									</div>
									<div style="text-align:center; ">首次使用登陆将自动为您注册</div>
								</div>
							</form>
						</div>
					</div>
					<div role="tabpanel" class="tab-pane" id="tab2">
						<div class="regForm">
							<form id="password_login" action="servlet/login" method="post" onsubmit="checkPwLogin()" >
								<div class="form-group">
									<input name="username" id="username" type="text"
										class="form-control" placeholder="用户名/手机号"><br> <input
										name="password" id="password" type="password"
										class="form-control" placeholder="密码">
										<!-- 隐藏输入框，区别登录方式 -->
										<input type="hidden"  value="login_password" name="flag"><br>
									<button class="sbtn sbtn-red" style="width: 100%;">登录</button><Br>
									<div style="text-align: right;"><a href="./jsp/register.jsp">立即注册</a></div>
								</div>
								
							</form>
						</div>
					</div>
				</div>
			</div>
			<div class="wechat">
				<div>
					<a href="./jsp/WechatLogin.jsp"><img src="https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon32_wx_logo.png">微信登录</a>
				</div>
			</div>
		</div>
		<div style="float:right;"><a href="index.jsp" ><span class="glyphicon glyphicon-home"><u>返回首页</u></a></div>
	</div>
	</div>
</div>
</div>
<hr style="border-style: inset;border-width: 1px;margin:0;"/>
	<footer style="width:100%;display:block;background-color: #eceeed;color: #868383;">
		<div>Copyright &copy; 2017</div>
	</footer>
	<script type="text/javascript">
		function checkPhoneLogin(){
			var SmsCheckCodeTip=$("#SmsCheckCodeTip").text();
			
			if(SmsCheckCodeTip=="√ 短信验证码正确，请继续"){
				return true;
			}
			return false;
		}
		
		function checkPwLogin(){
			var username=$("#username").val();
			var password=$("#password").val();
			if(username!="" && password!=""){
				return true;
			}
			return false;
		}
	</script>
	<script src="./js/jquery.min.js"></script>
	<script src="./js/flat-ui.min.js"></script>
	<script src="./js/script.js"></script>
	
</html>
